import { useEffect, useState } from 'react'
import axios from './api/axios'
import { Tabs } from 'antd';
import type { TabsProps } from 'antd';
import './App.css'
interface Tablist {
key:number

}
//www
function App() {
  const [list, setList] = useState([])
  const getlist=async()=>{
const res=await axios.get('/mock/tab')
console.log(res);
const {data}=res.data
console.log(data);
setList(data)

  }
  useEffect(()=>{
    getlist()
  },[])
const onChange = (key: string) => {
  console.log(key);
};
  return (
    <div className='tabitem'>
      <Tabs defaultActiveKey="1"  onChange={onChange} >
        {
          list.length>0 && list.map((item,index)=>(
            <Tabs.TabPane tab={item.label} key={index}>
              {
                item.children.map((it,ind)=>(
                  <p key={ind}>
                  <span>{ind<3?ind+1:''}</span>
                  {it.word}
                  </p>
                ))
              }

            </Tabs.TabPane>
          ))
        }

      </Tabs>

    </div>
  )
}

export default App
